<template>
  <div class="login" v-show="LoginShow">
    <div class="login-in-mask" @click="changeLoginShow(false)"></div>
    <div class="login-content">
      <div class="login-content-t" v-show="$store.state.num !== 3">
        登录
        <i @click="changeLoginShow(false)">x</i>
      </div>
      <div class="login-content-b" v-show="$store.state.num == 1">
        <div class="login-content-b-in">
          <section class="tanxin">
            <img
              class="img1"
              src="https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/9643571155/525c/faac/2dc6/fe695c03c7c358ddaa4651736b26a55f.png"
              alt=""
            />
            <div class="dl tanxin">
              <span>扫码登陆</span>
              <img width="128" src="../assets/erweima.png" alt="" />
              <p>使用&nbsp; <a href="#">网易云音乐APP</a>&nbsp;扫码登陆</p>
            </div>
          </section>
          <div class="a" @click="$store.state.num = 2">
            <a href="#">选择其他登录方式登录</a>
          </div>
        </div>
      </div>
      <div class="login-content-b2" v-show="$store.state.num == 2">
        <section class="tanxin">
          <div class="login-content-b2-l tanxin">
            <img
              width="224"
              height="120"
              src="https://p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/9647707645/c8e7/4d8d/1895/6dff82b63181104bbac7cf3743c8b613.png"
              alt=""
            />
            <div class="sjh" @click="$store.dispatch('asyncSjh', 3)">
              <a href="#">手机号登录</a>
            </div>
            <div class="zc" @click="$store.dispatch('asyncSjh', 4)">
              <a href="#">注册</a>
            </div>
          </div>
          <div class="login-content-b2-r">
            <ul>
              <li><i></i><a href="#">微信登录</a></li>
              <li><i></i><a href="#">qq登录</a></li>
              <li><i></i><a href="#">微博登陆</a></li>
              <li><i></i><a href="#">网易云账号登陆</a></li>
            </ul>
          </div>
        </section>
        <div class="btn">
          <input type="checkbox" name="" id="" v-model="$store.state.check" />
          <label>同意</label>
          <a href="#">《服务条款》</a>
          <a href="#">《隐私政策》</a>
          <a href="#">《儿童隐私政策》</a>
        </div>
        <img
          @click="$store.state.num = 1"
          class="erwei"
          src="https://p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/9656441793/9f07/c197/3af2/f07b8d6ef20964be159ce812841fc9d2.png"
          alt=""
        />
      </div>

      <div class="login-content-b5 tanxin" v-show="form">
        <p>请勾选同意，《服务条款 》，《隐私政策》，</p>
        <p>《儿童隐私政策》</p>
      </div>
    </div>

    <div class="login-content-2" v-show="$store.state.num == 3">
      <div class="login-content-t-2">
        手机号登录
        <i @click="changeLoginShow(false)">x</i>
      </div>
      <div class="login-content-b3" v-show="$store.state.num == 3">
        <section>
          <div class="number-sjh tanxin">
            <a href="#">+86</a>
            <input
              type="text"
              name=""
              id=""
              placeholder="请输入手机号"
              v-model="phone"
            />
          </div>
          <div class="number-yzm tanxin">
            <input
              type="text"
              name=""
              id=""
              placeholder="请输入验证码"
              v-model="code"
            />
            <a href="#" @click="getCode" v-show="showyzm"><i>获取验证码</i></a>
            <a href="#" @click="getCode" v-show="!showyzm"
              ><i>{{ yzmnum }}</i></a
            >
          </div>
          <div class="number-btn tanxin">
            <a href="#">密码登陆</a>
            <span class="tanxin"
              ><input type="checkbox" name="" id="" /><a href="#"
                >自动登录</a
              ></span
            >
          </div>
          <div class="number-dl" @click="takeLogin">登录</div>
        </section>
        <div class="login-content-b3-bottom tanxin">
          <a href="javascript:;" @click="$store.state.num = 2"
            >&lt;&nbsp;&nbsp;其他登录方式
          </a>
          <a href="javascript:;" @click="$store.state.num = 4"
            >&lt;&nbsp;&nbsp;没有帐号？免费注册
          </a>
        </div>
      </div>
    </div>

    <div class="login-content-2" v-show="$store.state.num == 4">
      <div class="login-content-t-2">
        手机号注册
        <i @click="changeLoginShow(false)">x</i>
      </div>
      <div class="login-content-b4" v-show="$store.state.num == 4">
        <section>
          <div class="number-sjh tanxin">
            <a href="#">+86</a>
            <input type="text" name="" id="" placeholder="请输入手机号" />
          </div>
          <div class="number-pwd">
            <input
              type="text"
              name=""
              id=""
              placeholder="设置登录密码，不少于8位"
            />
          </div>
          <div class="number-dl">下一步</div>
        </section>
        <div class="login-content-b3-bottom">
          <a href="#" @click="$store.state.num = 2">&lt;返回登录</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import { getCodeApi, takeCodeApi } from "@/request/api";
const validatephone = (phone) => {
  let reg =
    /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
  return reg.test(phone.trim());
};
export default {
  data() {
    return {
      phone: "",
      code: "",
      showyzm: true,
      yzmnum: 5,
      password: 123456,
    };
  },
  computed: {
    LoginShow() {
      return this.$store.state.LoginShow;
    },
    form() {
      return this.$store.state.form;
    },
  },
  methods: {
    ...mapMutations(["changeLoginShow"]),

    takeLogin() {
      let result = validatephone(this.phone);
      if (result == false) {
        alert("输入手机号不正确");
        return;
      }
      takeCodeApi({
        phone: this.phone,
        password: this.password,
        captcha: this.code,
      }).then((res) => {
        console.log("登录", res.data);
        if(res.data.code==200){
          localStorage.setItem("token",res.data["token"])
        localStorage.setItem("id",res.data.account.id)
        console.log(res.data.id);
         this.changeLoginShow(false)
         this.$store.state.dlimgShow = false
        }
      });
    },
    //获取验证码
    getCode() {
      let result = validatephone(this.phone);
      if (result == false) {
        alert("输入手机号不正确");
        return;
      }
      getCodeApi({
        phone: this.phone,
      }).then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
          this.showyzm = false;
          let timer = setInterval(() => {
            this.yzmnum--;
            if (this.yzmnum == 0) {
              clearInterval(timer);
              this.yzmnum = 5;
              this.showyzm = true;
            }
          }, 1000);
        }
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets//base.less";
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
.login {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 9999;

  .login-in-mask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
  }
  .login-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .login-content-t {
      position: relative;
      margin: 0;
      padding: 0 45px 0 18px;
      height: 38px;
      line-height: 38px;
      z-index: 10;
      border-bottom: 1px solid #191919;
      border-radius: 4px 4px 0 0;
      background: #2d2d2d;
      font-weight: bold;
      font-size: 14px;
      color: #fff;
      i {
        position: absolute;
        right: 20px;
        color: #ccc;
        cursor: pointer;
      }
    }
    .login-content-b {
      width: 538px;
      height: 326px;
      background-color: #fff;
      .login-content-b-in {
        width: 100%;
        height: 100%;
        background-color: #ccc;
        margin: 0 auto;
        overflow: hidden;
        section {
          width: 528px;
          height: 220px;
          justify-content: center;
          align-content: center;
          margin-top: 30px;
          .img1 {
            width: 125px;
            height: 220px;
          }
          .dl {
            margin-left: 25px;
            height: 213px;
            width: 200px;
            text-align: center;
            text-align: center;
            flex-direction: column;
            justify-content: center;
            span {
              font-size: 16px;
            }
            p {
              font-size: 12px;
            }
            img {
              margin: 20px auto;
            }
          }
        }
        .a {
          margin: 0 auto;
          margin-top: 25px;
          font-size: 11px;
          border: 1px solid #000;
          width: 120px;
          padding: 8px;
          border-radius: 20px;
          a {
            color: #000;
          }
        }
      }
    }
    .login-content-b2 {
      width: 538px;
      height: 326px;
      background-color: #fff;
      overflow: hidden;
      section {
        width: 528px;
        height: 220px;
        margin-top: 40px;
        justify-content: space-around;
        align-items: center;
        .login-content-b2-l {
          transform: translateX(30px);
          box-sizing: border-box;
          width: 300px;
          height: 224px;
          padding-right: 20px;
          border-right: 1px dotted #ccc;
          flex-direction: column;
          justify-content: space-around !important;
          .sjh {
            text-align: center;
            width: 224px;
            height: 31px;
            background-color: darkgoldenrod;
            line-height: 31px;
            border-radius: 5px;
            a {
              color: #fff;
              font-size: 11px;
            }
          }
          .zc {
            text-align: center;
            width: 224px;
            height: 31px;
            line-height: 31px;
            border-radius: 5px;
            border: 1px solid #999;
            box-sizing: border-box;
            a {
              color: #333;
              font-size: 11px;
            }
          }
        }
        .login-content-b2-r {
          margin-top: -15px;

          ul {
            margin: 35px auto;

            box-sizing: border-box;
            li {
              margin: 20px 0;
              a {
                font-size: 13px;
              }
              &:nth-child(1) i {
                background: url("https://p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/9648211200/78e2/e798/8954/69c9dc91e5fc0e50e53d1dfa87f0700e.png");
                display: inline-block;
                vertical-align: middle;
                margin-right: 14px;
                width: 38px;
                height: 38px;
                background-position: -150px -670px;
              }
              &:nth-child(2) i {
                background: url("https://p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/9648211200/78e2/e798/8954/69c9dc91e5fc0e50e53d1dfa87f0700e.png");
                display: inline-block;
                vertical-align: middle;
                margin-right: 14px;
                width: 38px;
                height: 38px;
                background-position: -190px -670px;
              }
              &:nth-child(3) i {
                background: url("https://p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/9648211200/78e2/e798/8954/69c9dc91e5fc0e50e53d1dfa87f0700e.png");
                display: inline-block;
                vertical-align: middle;
                margin-right: 14px;
                width: 38px;
                height: 38px;
                background-position: -231px -670px;
              }
              &:nth-child(4) i {
                background: url("https://p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/9648211200/78e2/e798/8954/69c9dc91e5fc0e50e53d1dfa87f0700e.png");
                display: inline-block;
                vertical-align: middle;
                margin-right: 14px;
                width: 38px;
                height: 38px;
                background-position: -271px -670px;
              }
            }
          }
        }
      }
      .btn {
        cursor: pointer;
        display: flex;
        transform: translateX(35px);
        margin-top: 25px;

        a {
          font-size: 10px;
          padding-left: 5px;
        }
        label {
          font-size: 10px;
          margin-left: 3px;
          color: #ccc;
        }
      }
    }

    .login-content-b5 {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      width: 320px;
      height: 90px;
      background: rgba(0, 0, 0, 0.8);
      line-height: 90px;
      text-align: center;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      p {
        font-size: 13px;
        color: #fff;
        width: 320px;
        height: 30px;
        transform: translateY(-30px);
      }
    }
  }
  .erwei {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 52px;
  }

  .login-content-2 {
    width: 530px;
    height: 313px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .login-content-t-2 {
      position: relative;
      margin: 0;
      padding: 0 45px 0 18px;
      height: 38px;
      line-height: 38px;
      z-index: 10;
      border-bottom: 1px solid #191919;
      border-radius: 4px 4px 0 0;
      background: #2d2d2d;
      font-weight: bold;
      font-size: 14px;
      color: #fff;
      i {
        position: absolute;
        right: 20px;
        color: #ccc;
        cursor: pointer;
      }
    }
    .login-content-b3,
    .login-content-b4 {
      width: 530px;
      height: 274px;
      background-color: #fff;
      overflow: hidden;
      section {
        margin: 0 auto;
        padding: 30px 0 43px;
        width: 220px;
        .number-sjh {
          height: 100%;
          box-sizing: border-box;
          border: 1px solid #ccc;
          a {
            height: 30px;
            line-height: 30px;
            text-align: left;
            border: 1px solid #cdcdcd;
            color: #333;
            display: inline-block;
            width: 44px;
            font-size: 11px;
            position: relative;
            border: none;
            border-right: 1px solid #ccc;
            &::after {
              content: "";
              position: absolute;
              top: 14px;
              right: 7px;
              width: 7px;
              height: 4px;
              background: url("https://p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/9663139760/c674/1c72/42b8/ba32baac609d90c1c671ac3af4d29d14.png");
              background-position: -260px -450px;
            }
          }
          input {
            display: block;
            padding: 0 8px;
            width: 70%;
            height: 32px;
            outline: none;
            border: none;
            color: #333;
            background: none;
          }
        }
        .number-yzm {
          margin-top: 10px;
          height: 34px;
          box-sizing: border-box;
          align-items: center;
          input {
            display: block;
            padding: 0 8px;
            width: 140px;
            height: 30px;
            outline: none;
            border: 1px solid #ccc;
            color: #333;
            background: none;
            box-sizing: border-box;
          }
          a {
            box-sizing: content-box;
            width: 70px;
            height: 31px;
            line-height: 27px;
            color: #333;
            vertical-align: top;
            text-align: center;
            white-space: nowrap;
            cursor: pointer;
            display: inline-block;
            width: 61px;
            padding: 0 2px 0 7px;
            text-align: center;
            border: 1px solid #ccc;
            border-radius: 5px;
            i {
              font-size: 11px;
              text-align: center;
              width: 61px;
            }
          }
        }
      }
      .number-btn {
        height: 17px;
        margin-top: 15px;
        align-items: center;
        a {
          font-size: 12px;
          color: #999;
        }
        span {
          align-items: center;
          input {
            transform: translateY(2px);
          }
          a {
            margin-left: 5px;
          }
        }
      }
      .number-dl {
        margin-top: 20px;
        text-align: center;
        line-height: 31px;
        height: 31px;
        width: 100%;
        background-color: @blue;
        font-size: 12px;
        border-radius: 5px;
        color: #fff;
      }
      .login-content-b3-bottom {
        justify-content: space-around;
        width: 100%;
        height: 39px;
        background-color: #f7f7f7;
        border-top: 1px solid #c6c6c6;
        line-height: 39px;
        a {
          color: #999;
          font-size: 12px;
        }
      }
      .number-pwd {
        margin-top: 15px;
        width: 100%;
        height: 32px;
        border: 1px solid #ccc;
        box-sizing: border-box;
        input {
          display: block;
          padding: 0 8px;
          width: 100%;
          height: 100%;
          outline: none;
          border: none;
          color: #333;
          background: none;
          box-sizing: border-box;
        }
      }
    }
    .login-content-b4 {
      width: 530px;
      height: 256px;
      background-color: #fff;
      overflow: hidden;

      .login-content-b3-bottom {
        height: 49px;
        line-height: 49px;
        a {
          margin-left: 20px;
        }
      }
    }
  }
}
</style>